<template>
  <div class="image-upload">
      <div class="main">
        <div class="tp" v-if="imgList.length==0">
          <span @click="camera" v-if="imgList.length===0" class="iconfont iconcamera_full"></span>
        </div>
        <div class="tp" v-else v-for="(img, index) in imgList" :key="index" >
          <div  class="image" :class="{loading:isBlob(img)}">
            <cube-loading  :size="16" class="loading" ></cube-loading>
            <span @click="del(index)" class="iconfont iconcha"></span>
            <img @click="showImagePreview(index)"  class="img" :src="imgUrl(img)" alt="" >
          </div>
        </div>
        <div v-if="imgList.length>0&&imgList.length<4" class="add" @click="camera">
          <span class="iconfont iconjia"></span>
        </div>
        <input @change="selectFile" style="display: none" ref="camera" type="file" id='image' accept="image/*" >
      </div>
  </div>
</template>

<script>
// import { createBase64 } from '../../util/img'
import { QI_NIU_URL } from '@/api/form'
import { uploadImg } from '@/api/form'

export default {
  props: {
    icon: String,
    title: String,
    value: String
  },
  mounted () {

  },
  computed: {
    imgList () {
      if (!this.value) {
        return []
      }
      return this.value.split(',').filter(value => value !== '')
    },
    preImgList () {
      return this.imgList.map(img => {
        return this.imgUrl(img)
      })
    }
  },
  data () {
    return {

    }
  },
  methods: {
    showImagePreview (initialIndex) {
      this.$createImagePreview({
        imgs: this.preImgList,
        initialIndex: initialIndex
      }).show()
    },
    update () {
      let res = ''
      this.imgList.forEach(img => {
        res += img + ','
      })
      this.$emit('input', res)
    },
    imgUrl (img) {
      if (this.isBlob(img)) { // base64文件直接返回
        return img
      }
      // 图片名要加前缀
      return QI_NIU_URL + img
    },
    isBase64 (img) {
      if (img && img.indexOf('data:image/jpeg;base64') > -1) { // base64文件直接返回
        return true
      }
      return false
    },
    isBlob (img) {
      if (img && img.indexOf('blob') > -1) {
        return true
      }
      return false
    },
    selectFile (e) {
      const file = e.target.files[0]
      // console.log(file);
      const url = URL.createObjectURL(file)
      this.imgList.push(url)
      this.update()
      const index = this.imgList.length - 1
      uploadImg(file, {
        next: res => {

        },
        complete: res => {
          this.imgList[index] = res.key
          this.update()
        },
        error: res => {
          this.imgList.splice(index, 1)
          this.update()
        }
      })
      // console.log(url)
      // createBase64(e.target.files[0]).then(res => {
      // console.log(res)
      // this.imgList.push(res)
      // const index.js = this.imgList.length - 1
      // uploadBase64Img(res).then(res => {
      //   // 返回文件名
      //   this.$set(this.imgList, index.js, res)
      //   this.update()
      // }).catch(res => {
      // })
      // })
    },
    del (index) {
      this.imgList.splice(index, 1)
      this.update()
    },
    camera () {
      // console.log(11233131);
      this.$refs.camera.click()
    }
  }
}
</script>

<style scoped lang="stylus">
  .image-upload
      .main
        margin-bottom 10px
        display flex
        align-items center
        justify-content flex-start
        .tp,.add
          display flex
          align-items center
          justify-content center
          width:68px;
          height:68px;
          margin-left 10px
          .iconcamera_full
            color #C3C2C0
            dpr-font(27px)
          .iconjia
            dpr-font(20px)
            color #E6E5E6
        .tp
          background:rgba(230,229,230,1);
          .image
            position relative
            width 100%
            height 100%
            display flex
            align-items center
            justify-content center
            .iconcha
              z-index 1
              /*padding 4px 4px*/
              position absolute
              top -5px
              right -5px
              color white
              background-color rgb(111,123,143)
              border-radius 50%
              overflow hidden
              dpr-font(6px)
            .loading
              display none
              z-index 1
              position absolute
              top 50%
              left 50%
              transform translateY(-50%) translateX(-50%)
              color black
            .img
              width 100%
              height 100%
            &.loading
              .loading
                display block
              .img
                opacity .4
        .add
          border 1Px dotted #E6E5E6
</style>
